<!-- Movies main view --->
<div data-role="view" data-title="Movies" id="mt-home-main-view"
     data-layout="mt-main-layout"
     class="no-backbutton"
     data-init="appInit.movieListInit">

    <!-- filter -->
    <ul data-role="buttongroup" data-index="0" data-bind="events: {select: listTypeSelected}">
        <li>Now Playing</li>
        <li>Coming Soon</li>
        <li>A-Z</li>
    </ul>

    <!--Movie List -->
    <ul id="mt-main-movie-list-view" data-role="listview"
        data-template="mt-main-tmpl-movie-list"
        data-filterable="{field:'Name', operator:'startsWith'}"
        data-bind="source:movieList"></ul>
</div>
<script type="text/x-kendo-template" id="mt-main-tmpl-movie-list">
    # var ecodedURI = 'Theaters.html?movieId=' + MovieId +
    '&movieName=' + encodeURIComponent(Name) +
    '&rating=' + Rating +
    '&image=' + Image#
    #if(IsNowPlaying !== true){
        ecodedURI= "";
    }#
    <a href="#:ecodedURI#">
        <img class="mt-movie-photo" src="#:Image#" />
        <div class="mt-movie-details">
            <span class="mt-listitem-title"> #:Name# </span>
            <span data-bind="invisible:IsNowPlaying"
                  class="mt-highlight-label2">[Coming Soon]</span><br />
            <span class="mt-normal-label"> #:Genre#, </span>
            <span class="mt-normal-label"> #:Length# Mins </span>
            <span class="mt-highlight-label"> #:Rating# </span> <br />
            <span class="mt-normal-label"> #:LeadStars# </span>
        </div>
    </a>
</script>